<template>
  <!-- 韩佳轩 4-4 商品小分类-->
  <div class="pageClassifyList">
    <img
      src="@/assets/ClassifyImage/xiaoshops.png"
      width="100%"
      height="420px"
    />

    <!-- 中间内容 -->
    <div class="center">
      <!-- 今日心动 -->
      
        <div style="width: 300px;margin-left:-150px;margin-top:40px">
        <img
            src="@/assets/ClassifyImage/柴犬logo.png"
            style="width: 400px;position:absolute"
          /> 
        </div>
        <div class="classify_i" >
        <h1
          style="
            text-align: center;
            letter-spacing: 10px;
            font-family: 'Times New Roman', Times, serif;
            font-weight:400;
            
          "
        >
             商品系列大赏
        </h1>
          <el-row>
            <el-col
              :span="6"
              v-for="(img, index) in classifyList"
              :key="index"
              :offset="index % 3 != 0 ? 3 : 0"
              style="height: 380px"
            >
              <el-card :body-style="{ padding: '0px' }">
                <img :src="$imageUrl+'?id='+img.imgId" class="image" style="width: 300px; height: 200px"/>
                <div style="padding: 14px">
                  <span style="font-family: 'Times New Roman', Times, serif;font-size:20px">{{ img.typeSname }}</span>
                  <div class="bottom clearfix">
                    <el-button type="text" class="button" @click="ShopsList(img.id)"
                      ><i
                        class="el-icon-caret-right"
                        style="margin-right: 10px"
                      ></i
                      >立即查看</el-button
                    >
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    <template>
      <h2
        style="
          text-align: center;
          letter-spacing: 10px;
          font-family: 'Times New Roman', Times, serif;
          margin: 25px 0 50px 0;
        "
      >
        其他样式小商品
      </h2>
      <el-carousel :interval="4000" type="card" height="370px">
        <el-carousel-item v-for="(item,index) in images" :key="index">
          <h3 class="medium">
            <el-image style="width: 100%" fit="fit" :src="item.url1"></el-image>
          </h3>
        </el-carousel-item>
      </el-carousel>
    </template>
  </div>
</template>

<script>
export default {
  name: "pageClassifyList",
  data() {
    return {
      id:0,
      //小分类名称
      typeSname:"",
      imgId:"",
      // 轮播图图片
      images: [
        { url1: require("../../assets/ClassifyImage/youkll.jpg") },
        { url1: require("../../assets/ClassifyImage/naiyou.jpg") },
        { url1: require("../../assets/ClassifyImage/cake.jpg") },
        { url1: require("../../assets/ClassifyImage/hua.jpg") },
        { url1: require("../../assets/ClassifyImage/jiezhi.jpg") },
        { url1: require("../../assets/ClassifyImage/ditan.jpg") },
        { url1: require("../../assets/ClassifyImage/8.jpg") },
        { url1: require("../../assets/ClassifyImage/bao.jpg") },
      ],
      classifyList: [ ],
    };
  },
  mounted(){
    //声明前端的大分类id
    this.id = this.$route.query.id
    this.getClassify();
  },
  methods: {
    //点击小分类图片跳商品列表
      ShopsList(id){
       this.$router.push({
        //跳转的地址
        path:'/pageshops',
        query: {
          //id是xiao分类id
          id: id
         }
        })
    },
    getClassify(){
   // 根据大分类id查小分类
      this.$axios.get("/commodity/classify/getClassify", {
       params:{
        //给后端的大分类id赋值  this.id是前端声明的大分类id
        typeId: this.id, 
       }
        })
        .then((res) => {
          if (res.data.flag) {
            this.classifyList = res.data.data;
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
     myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
  },
};
</script>

<style scoped>


/*页面居中*/
.center {
  width: 80%;
  margin: 0 auto;
}
/*中间图片*/
.center_img {
  width: 100%;
  height: 200px;
}
.center_img > div {
  width: 50%;
  display: inline-block;
}
.center_img img {
  height: 220px;
  display: inline-block;
}

/*分类*/
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: left;
  font-weight: 700;
  color: #ffcd00;
}

.image {
  width: 100%;
  display: block;
}


.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.classify_i {
  width: 60%;
  margin: 0 auto;
}
</style>